<template>
    <el-scrollbar class="dev-guide-box">
        <div class="guid-con" id="markedContent"></div>
    </el-scrollbar>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { JsUtil } from '../../../../utils/JsUtil';
export default defineComponent({
    name: "DevGuide",
    data() {
        return {
            message: ""
        };
    },
    components: {},
    methods: {
        async loadData() {
            await JsUtil.judgeLoadedByUrl("https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.1/build/styles/tomorrow-night-bright.min.css");
            await JsUtil.judgeLoadedByUrl("https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.1/build/highlight.min.js");
            await JsUtil.judgeLoadedByUrl("https://cdn.jsdelivr.net/npm/marked/marked.min.js");
            const res = await (window as any).axios.get(`./md/devGuide.md`);
            const marked = (window as any).marked;
            marked.setOptions({
                renderer: new marked.Renderer(),
                highlight: function(code:any) {
                    return (window as any).hljs.highlightAuto(code).value;
                },
                pedantic: false,
                gfm: true,
                tables: true,
                breaks: false,
                sanitize: false,
                smartLists: true,
                smartypants: false,
                xhtml: false
            }
            );
            document.getElementById('markedContent')!.innerHTML = marked(res.data).replace(/<pre>/g, "<pre class='hljs'>");
        }
    },
    mounted() {
        this.loadData();
    },
});
</script>
<style scoped lang="less">
.dev-guide-box {
    width: 100%;
    height: 100%;
    .guid-con {
        width: 70%;
        margin: 0 auto;
        font-size: 0.2rem;
    }
}
</style>
